<template>
    <div class="login-container">
      <div class="login-form">
        <h2>登录聊天</h2>
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            id="username"
            v-model="formData.username"
            type="text"
            placeholder="请输入用户名"
            @keyup.enter="handleSubmit"
          >
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            id="password"
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
            @keyup.enter="handleSubmit"
          >
        </div>
        <div class="error-message" v-if="errorMessage">
          {{ errorMessage }}
        </div>
        <button 
          class="login-button" 
          @click="handleSubmit"
          :disabled="isLoading || !isValid"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        <div class="demo-info">
          <p>测试账号：</p>
          <p>用户名：test</p>
          <p>密码：password</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const emit = defineEmits(['login'])
  
  const formData = ref({
    username: '',
    password: ''
  })
  
  const isLoading = ref(false)
  const errorMessage = ref('')
  
  const isValid = computed(() => {
    return formData.value.username.trim() && formData.value.password.trim()
  })
  
  const handleSubmit = async () => {
    if (!isValid.value || isLoading.value) return
  
    try {
      isLoading.value = true
      errorMessage.value = ''
      
      // 发出登录事件
      await emit('login', {
        username: formData.value.username,
        password: formData.value.password
      })
    } catch (error) {
      errorMessage.value = error.message || '登录失败，请重试'
    } finally {
      isLoading.value = false
    }
  }
  </script>
  
  <style scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
  }
  
  .login-form {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
  }
  
  input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
  }
  
  input:focus {
    outline: none;
    border-color: #07c160;
  }
  
  .error-message {
    color: #ff4d4f;
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .login-button {
    width: 100%;
    padding: 12px;
    background-color: #07c160;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .login-button:hover:not(:disabled) {
    background-color: #06ae56;
  }
  
  .login-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .demo-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #666;
  }
  
  .demo-info p {
    margin: 5px 0;
  }
  
  /* 添加输入框动画效果 */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  
  input.error {
    border-color: #ff4d4f;
    animation: shake 0.3s ease-in-out;
  }
  
  /* 添加加载动画 */
  @keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rotating 1s linear infinite;
  }
  
  /* 响应式设计 */
  @media (max-width: 480px) {
    .login-form {
      padding: 20px;
      margin: 0 20px;
    }
  }
  </style>